<?php 
$appId = 'wx3464c6b9fd10bf5c';
$secret = '14261ef0ece5d043f5bdea33eabee81b';
include_once './jssdk.php';
$jssdk = new JSSDK($appId, $secret);
$signPackage = @$jssdk->GetSignPackage();
?><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>爽约自救指南</title>
<style>
html,body{width:100%;font-size:12px;font-family:Helvetica,Tahoma, Arial, STXihei,Microsoft YaHei, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}
body{position:relative;background:#ffffff;}
body, div{padding:0px;margin:0px auto;max-width:750px;}
.weui-dialog{position:fixed;z-index:5000;width:80%;max-width:300px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#FFF;text-align:center;border-radius:3px;overflow:hidden}.weui-dialog__hd{padding:1.3em 1.6em .5em}.weui-dialog__title{font-weight:400;font-size:18px}.weui-dialog__bd{padding:0 1.6em .8em;min-height:40px;font-size:15px;line-height:1.3;word-wrap:break-word;word-break:break-all;color:#999}.weui-dialog__bd:first-child{padding:1.2em 20px .1em;color:#353535}.weui-dialog__ft{position:relative;line-height:48px;font-size:18px;display:-webkit-box;display:-webkit-flex;display:flex}.weui-dialog__ft:after{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1px solid #D5D5D6;color:#D5D5D6;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.weui-dialog__btn{display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;color:#3CC51F;text-decoration:none;-webkit-tap-highlight-color:transparent;position:relative}.weui-dialog__btn:active{background-color:#EEE}.weui-dialog__btn:after{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1px solid #D5D5D6;color:#D5D5D6;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleX(.5);transform:scaleX(.5)}.weui-dialog__btn:first-child:after{display:none}.weui-dialog__btn_default{color:#353535}.weui-dialog__btn_primary{color:#0BB20C}@media screen and (min-width:1024px){.weui-dialog{width:35%}}.weui-mask{position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,.6)}
.weui-mask_transparent{position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0}
.js_dialog{display:none;}
-webkit-touch-callout:none;
-webkit-user-select:none;
html{-ms-touch-action:none;}
div,img{-webkit-tap-highlight-color:rgba(0,0,0,0);}
*{-webkit-text-size-adjust: none;}
.simg{position:absolute;display:block;}
a{text-decoration:none;}
.txt{position:absolute;text-indent:4px;color:#787c7f;font-size:12px;z-index:2;border:none;background:transparent;}
.txt::-webkit-input-placeholder {text-align:left;}
select{position:absolute;color:#787c7f;display:block;background:transparent;border:0px;text-indent:4px;font-size:12px;-webkit-appearance:none;}
.container{position:relative;width:100%;height:auto;overflow:hidden;}
.page{position:absolute;width:100%;height:100%;display:none;}
.bg{position:absolute;width:100%;top:0;left:0;}
.p1-d1{position:absolute;width:100%;bottom:0;left:0;}
.p-bg, .bg-tu{position:absolute;width:100%;top:0;left:0;}
.p1-bga{position:absolute;width:100%;height:60%;background:#fcc74a;}
.p1-t7{position:absolute;width:100%;left:0;top:0;}
.p2, .p3, .p4, .p5, .p6, .p7{background:transparent url('./img/p2.jpg') no-repeat;background-size:cover;}
.p2-txt{position:absolute;color:#000000;font-size:14px;font-weight:600;width:100%;left:0;text-align:center;}
.p-a, .p-b, .p-c{position:absolute;}
.p2-l, .p2-r{position:absolute;z-index:3;}
.p2-r{display:none;}
.t-bg{position:absolute;display:none;width:100%;height:100%;top:0px;left:0px;background-color:#000;opacity:.8;z-index:9;}
.t-6{z-index:99;}
.t6-t1{position:absolute;background:transparent url('./img/p6-tip.png?v=2') no-repeat;background-size:cover;}
.p-tu{position:absolute;display:block;width:100%;}
.p1-t1, .p1-t2{-webkit-transform: translate(-.5em, 0);transform: translate(-.5em, 0);}
.p1-t1a{
 -webkit-animation: float ease-in-out 2s infinite;
  animation: float ease-in-out 2s infinite;
}
.p1-t2a{
 -webkit-animation: float ease-in-out 2s infinite;
  animation: float ease-in-out 2s infinite;
}
 @-webkit-keyframes float {
  0% {
    -webkit-transform: translate(-.5em, 0);
    transform: translate(-.5em, 0);
  }
  50% {
    -webkit-transform: translate(0, 1em);
    transform: translate(0, 1em);
  }
  100% {
    -webkit-transform: translate(-.5em, 0);
    transform: translate(-.5em, 0);
  }
}
@keyframes float {
  0% {
    -webkit-transform: translate(-.5em, 0);
    transform: translate(-.5em, 0);
  }
  50% {
    -webkit-transform: translate(0, 1em);
    transform: translate(0, 1em);
  }
  100% {
    -webkit-transform: translate(-.5em, 0);
    transform: translate(-.5em, 0);
  }
}
@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 3deg);
  }
  40% {
    transform: rotate3d(0, 0, 1, -2deg);
  }
  60% {
    transform: rotate3d(0, 0, 1, 1deg);
  }
  80% {
    transform: rotate3d(0, 0, 1, -1deg);
  }
  to {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.swing {
  transform-origin: top center;
  animation-name: swing;
}
@keyframes rollOut{
  from {opacity: 1;}
  to {opacity: 0;transform: translate3d(150%, 0, 0) rotate3d(0, 0, 1, 120deg);}
}
@keyframes rollOutL{
  from {opacity: 1;}
  to {opacity: 0;transform: translate3d(-150%, 0, 0) rotate3d(0, 0, 1, -120deg);}
}
.rollOut{animation-name:rollOut;}
.rollOutL{animation-name:rollOutL;}
.hide{display:none;}
.load{background:#fcc74a;}
.load-t1{position:absolute;background:transparent url('./img/l/b.png') no-repeat;background-size:cover;}
#load-t2, .loadtu{position:absolute;left:0;top:0;width:100%;height:100%;}
.loadtu{opacity:0;}
.animated{animation-duration: 1s;animation-fill-mode: both;}
.animated.infinite{animation-iteration-count: infinite;}
.animated.delay-1s {animation-delay: 1s;}
.p-mu{position:absolute;z-index:5;}
.pj1-zi{position:absolute;left:0;width:100%;}
.pj1-d{position:absolute;left:0;width:100%;bottom:0;}
.hai{position:absolute;left:0;width:100%;z-index:6;opacity:0;}
.pj-zhe{z-index:9;}
.pj-d2, .pj-top, .kou-top, .pj-color, .pj-pao{position:absolute;left:0;width:100%;}
.pj-top, .kou-top{top:0;z-index:2}
.pj-color{height:30%;bottom:0;}
.pj-pao{bottom:0;}
.kou-di{position:absolute;bottom:0;right:0;}
.kou-k{z-index:3;}
.kou-b{z-index:6;}
</style><script>var _hmt = _hmt || [];(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?bb8ad34316032ef3751a529a820d0dab";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();</script></head><body>
<div class="container">
 
 <div class="load page">
    <div class="load-t1">
       <img id="loadtu" class="loadtu" src="./img/l/1.png">
       <canvas id="load-t2" width="390" height="178"></canvas>
    </div>
 </div>
 
 <div class="p1 page">
    <div class="p1-bga"></div>
    <img class="p1-t7" src="./img/p1-t7.png" />
    <div class="p-bg">
        <img class="p1-t3 simg" src="./img/p1-t3.png" />
        <img class="p1-t4 simg" src="./img/p1-t4.jpg" />
	    <img class="p1-t1 simg" src="./img/p1-t1.png" />
	    <img class="p1-t2 simg" src="./img/p1-t2.png" />
	    <img class="p1-bt simg" src="./img/p1-bt.png" />
	    <img class="p1-bt p1-bta hide simg" src="./img/p1-bta.png" />
    </div>
    <img class="p1-d1 simg" src="./img/p1-d1.png" />
    <img class="p-mu" src="./img/m.png" />
 </div>
 
 <div class="p2 page">
   <div class="p-bg" id="1">
	    <img class="p2-t1 simg" src="./img/p2-t1.png" />
	    <img class="p2-x1 simg" src="./img/p2-x1.png" />
	    <img class="p2-x2 simg" src="./img/p2-x2.png" />
	    <img class="p2-x3 simg" src="./img/p2-x3.png" />
	    <img class="p2-a simg" src="./img/p2-a.png" />
	    <img class="p2-b simg" src="./img/p2-b.png" />
	    <img class="p2-c simg" src="./img/p2-c.png" />
	    <div class="p2-sa p-a"></div>
	    <div class="p2-sb p-b"></div>
	    <div class="p2-sc p-c"></div> 
	    <img class="p2-r" src="./img/p2-r.png" />
	    <div class="p2-txt">1 / 6</div>
   </div>
   <img class="p-mu" src="./img/m.png" />
 </div>
 <div class="p3 page">
   <div class="p-bg" id="2">
	    <img class="p2-t1 simg" src="./img/p3-t1.png" />
	    <img class="p3-x1 simg" src="./img/p3-x1.png" />
	    <img class="p3-x2 simg" src="./img/p3-x2.png" />
	    <img class="p3-x3 simg" src="./img/p3-x3.png" />
	    <img class="p3-a simg" src="./img/p2-a.png" />
	    <img class="p3-b simg" src="./img/p2-b.png" />
	    <img class="p3-c simg" src="./img/p2-c.png" />
	    <div class="p3-sa p-a"></div>
	    <div class="p3-sb p-b"></div>
	    <div class="p3-sc p-c"></div> 
	    <img class="p2-l" src="./img/p2-l.png" />
	    <img class="p2-r" src="./img/p2-r.png" />
	    <div class="p2-txt">2 / 6</div>
 	</div>
 	<img class="p-mu" src="./img/m.png" />
 </div>
 
 <div class="p4 page">
   <div class="p-bg" id="3">
	 	<img class="p2-t1 simg" src="./img/p4-t1.png" />
	 	<img class="p4-x1 simg" src="./img/p4-x1.png" />
	    <img class="p4-x2 simg" src="./img/p4-x2.png" />
	    <img class="p4-x3 simg" src="./img/p4-x3.png" />  
	    <img class="p4-a simg" src="./img/p2-a.png" />
	    <img class="p4-b simg" src="./img/p2-b.png" />
	    <img class="p4-c simg" src="./img/p2-c.png" />
	    <img class="p4-a simg" src="./img/p2-a.png" />
	    <img class="p4-b simg" src="./img/p2-b.png" />
	    <img class="p4-c simg" src="./img/p2-c.png" />
	    <div class="p4-sa p-a"></div>
	    <div class="p4-sb p-b"></div>
	    <div class="p4-sc p-c"></div> 
	 	<img class="p2-l" src="./img/p2-l.png" />
	    <img class="p2-r" src="./img/p2-r.png" />
	    <div class="p2-txt">3 / 6</div>
    </div>
    <img class="p-mu" src="./img/m.png" />
 </div>
 <div class="p5 page">
   <div class="p-bg" id="4">
 	<img class="p2-t1 simg" src="./img/p5-t1.png" />
 	<img class="p5-x1 simg" src="./img/p5-x1.png" />
    <img class="p5-x2 simg" src="./img/p5-x2.png" />
    <img class="p5-x3 simg" src="./img/p5-x3.png" />
    <img class="p5-a simg" src="./img/p5-a.png" />
    <img class="p5-b simg" src="./img/p5-b.png" />
    <img class="p5-c simg" src="./img/p5-c.png" />
    <div class="p5-sa p-a"></div>
    <div class="p5-sb p-b"></div>
    <div class="p5-sc p-c"></div> 
    <img class="p2-l" src="./img/p2-l.png" />
    <img class="p2-r" src="./img/p2-r.png" />
    <div class="p2-txt">4 / 6</div>
  </div>
  <img class="p-mu" src="./img/m.png" />
 </div>
 
 <div class="p6 page">
   <div class="p-bg" id="5">
 	<img class="p2-t1 simg" src="./img/p6-t1.png" />
 	<img class="p6-x1 simg" src="./img/p6-x1.png" />
    <img class="p6-x2 simg" src="./img/p6-x2.png" />
    <img class="p6-x3 simg" src="./img/p6-x3.png" />
    <img class="p6-a simg" src="./img/p2-a.png" />
    <img class="p6-b simg" src="./img/p2-b.png" />
    <img class="p6-c simg" src="./img/p2-c.png" />
    <div class="p6-sa p-a"></div>
    <div class="p6-sb p-b"></div>
    <div class="p6-sc p-c"></div> 
    <img class="p2-l" src="./img/p2-l.png" />
    <img class="p2-r" src="./img/p2-r.png" />
    <div class="p2-txt">5 / 6</div>
 	
   </div>
   <img class="p-mu" src="./img/m.png" />
 </div>
 
 <div class="p7 page">
      <div class="p-bg" id="6">
     	<img class="p2-t1 simg" src="./img/p7-t1.png" />
     	<img class="p7-x1 simg" src="./img/p7-x1.png" />
        <img class="p7-x2 simg" src="./img/p7-x2.png" />
        <img class="p7-x3 simg" src="./img/p7-x3.png" />
        <img class="p7-a simg" src="./img/p2-a.png" />
        <img class="p7-b simg" src="./img/p2-b.png" />
        <img class="p7-c simg" src="./img/p2-c.png" />
        <div class="p7-sa p-a"></div>
        <div class="p7-sb p-b"></div>
        <div class="p7-sc p-c"></div> 
        <img class="p2-l" src="./img/p2-l.png" />
        <div class="p2-txt">6 / 6</div>
     </div>
     <img class="p-mu" src="./img/m.png" />
 </div>
 
 <div class="pj page">
    <img class="pj-d1 bg-tu simg" src="./img/j2/d1.jpg" />
    <img class="pj-d2 simg" src="./img/j1/d2.png" />
    <div class="pj-color"></div>
    <img classj-pao hide" src="./img/j2/pao.png" />
    <img class="bg-tu pj-b2 simg" src="./img/j1/b2.png" />
    <img class="pj-top simg" src="./img/j1/t.png" />
    <img class="hai simg" src="./img/hai.jpg" />
    <div class="p-bg">
        <img class="bg-tu pj-b1 simg" src="./img/j1/b.png?v=9" />
     	<img class="pj-bao simg" src="./img/pj-bao.png?v=7" />
        <img class="pj-zhe simg" src="./img/pj-zhe.png?v=7" />
        <img class="pj-bao pj-baoa hide simg" src="./img/pj-baoa.png?v=2" />
        <img class="pj-zhe pj-zhea hide simg" src="./img/pj-zhea.png?v=2" />
        <img class="p-mu" src="./img/m.png" />
    </div>
 </div>
 
  
 
 <div class="kou page">
    
    <img class="kou-top kou-tb1 simg" src="./img/k1/t.png" />
    <img class="kou-top kou-tb simg" src="./img/k1/b.png" />
    <div class="p-bg">
    	<img class="p-tu kou-k simg" src="./img/k1/k.png" />
    	<img class="kou-b simg" src="./img/p2-l.png" />
        <img class="kou-b kou-ba hide simg" src="./img/p2-la.png" />
    </div>
    <img class="kou-di" src="./img/k1/d.png" />
    
    <img class="p-mu" src="./img/m.png" />
 </div>
 <div class="t-bg"></div>
 <div class="t-6 page">
    <div class="t6-t1">
      <div class="t6-close simg"></div>
      <div class="t6-big simg"></div>
      
    </div>
 </div>
 <div style="display:none;">
    <audio id="bgm" preload="auto" autoplay loop="loop">
        <source src='http://cdn.omnimkt.com/ice/m.mp3' type="audio/mp3">
        <source src="http://cdn.omnimkt.com/ice/m.ogg" type="audio/ogg">
    </audio>
    <audio id="anm" preload="auto"><source src='http://cdn.omnimkt.com/ice/an.mp3' type="audio/mp3"></audio>
    <audio id="feim" preload="auto"><source src='http://cdn.omnimkt.com/ice/fei2.mp3' type="audio/mp3"></audio>
 </div>
  
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./js/pxloader-images.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
_h=h= Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var sWidth = parseInt((window.innerWidth > 0) ? window.innerWidth : screen.width);
if(sWidth>750){sWidth=750;}
var _rate=(sWidth/750);

if(h<_rate*1206){h=_rate*1206;}
var _img=['p1.jpg'];
var loader = new PxLoader();
for(var i=1; i<13; i++){loader.addImage('./img/l/'+i+'.png');}
for(var i=0; i<_img.length; i++){loader.addImage('./img/'+_img[i]);}
loader.start();
var _loadcxt=document.getElementById("load-t2").getContext("2d");
var _lId=1;
var _maxId=1;
var _drawImgL=document.getElementById("loadtu");
function _runL(){
	$("#loadtu").attr("src","./img/l/"+_lId+".png");
	_loadcxt.clearRect(0,0,390,178);
	console.log(_lId);
	_loadcxt.drawImage(_drawImgL,0,0);
	_lId++;
	_maxId++;
	if(13 == _lId){_lId=1;}
	if(14 == _lId){_lId=1;}
	if(_maxId > 13){
        $(".load").hide();
        $(".p1").show().addClass("fade-in");
		return;}
	if(_lId < 13){
    	window.setTimeout(function(){_runL();}, 200);
    }
}
var _bgm = document.getElementById('bgm');
var _anm = document.getElementById('anm');
var _feim = document.getElementById('feim');
loader.addCompletionListener(function(e){
	_runL();
	_bgm.play();
    document.addEventListener("WeixinJSBridgeReady", function () {_bgm.play();}, false)
	$(".load").show().addClass("fade-in");
	$(".p1-t1").addClass("p1-t1a");
	window.setTimeout(function(){$(".p1-t2").addClass("p1-t2a");}, 800);
});
var _choosePage='气泡水';
$(function(){
	$('body').on('touchmove',function(e){
		//e.preventDefault();
	});
	$('.container, .hai').width(sWidth).height(h);
	$('.p-bg, .bg-tu').width(sWidth).height(_rate*1206);

	$('.load-t1').width(_rate*390).height(_rate*178).css({"top":(_h-_rate*178)/2, "left":_rate*180});
	$('.p1-t3').width(_rate*702).height(_rate*436).css({"top":_rate*120, "left":0});
	$('.p1-t4').width(sWidth).height(_rate*683).css({"top":_rate*522, "left":0});
	$('.p-mu').width(_rate*83).height(_rate*79).css({"bottom":_rate*120, "left":_rate*650});
	$('.p1-t1').width(_rate*276).height(_rate*412).css({"top":_rate*236, "left":0});
	$('.p1-t2').width(_rate*294).height(_rate*376).css({"top":_rate*376, "right":0});
	$('.p1-bt').width(_rate*368).height(_rate*136).css({"top":_rate*976, "left":_rate*192});
	$('.p2-t1').width(_rate*722).height(_rate*152).css({"top":0, "left":0});
	$('.p2-x1').width(_rate*530).height(_rate*382).css({"top":_rate*128, "left":_rate*220});
	$('.p2-x2').width(_rate*526).height(_rate*338).css({"top":_rate*472, "left":0});
	$('.p2-x3').width(_rate*506).height(_rate*420).css({"top":_rate*682, "left":_rate*200});
	$('.p2-l, .p2-r, .kou-b').width(_rate*116).height(_rate*95);
	$('.p2-l').css({"top":_rate*1096, "left":_rate*170});
	$('.p2-r').css({"top":_rate*1096, "left":_rate*466});
	$('.p2-txt').height(_rate*95).css({"top":_rate*1096,'line-height':_rate*95+'px'});
	$('.p2-sa').width(_rate*610).height(_rate*280).css({"top":_rate*200, "left":_rate*60});
	$('.p2-sb').width(_rate*610).height(_rate*280).css({"top":_rate*500, "left":_rate*40});
	$('.p2-sc').width(_rate*610).height(_rate*280).css({"top":_rate*800, "left":_rate*60});
	$('.p3-x1').width(_rate*542).height(_rate*316).css({"top":_rate*200, "left":_rate*208});
	$('.p3-x2').width(_rate*497).height(_rate*235).css({"top":_rate*556, "left":0});
	$('.p3-x3').width(_rate*528).height(_rate*276).css({"top":_rate*840, "left":_rate*198});
	$('.p3-sa').width(_rate*610).height(_rate*280).css({"top":_rate*200, "left":_rate*60});
	$('.p3-sb').width(_rate*610).height(_rate*260).css({"top":_rate*540, "left":_rate*40});
	$('.p3-sc').width(_rate*610).height(_rate*230).css({"top":_rate*860, "left":_rate*60});
	$('.p4-x1').width(_rate*468).height(_rate*235).css({"top":_rate*254, "left":_rate*218});
	$('.p4-x2').width(_rate*468).height(_rate*334).css({"top":_rate*458, "left":_rate*20});
	$('.p4-x3').width(_rate*487).height(_rate*317).css({"top":_rate*778, "left":_rate*224});
	$('.p2-a, .p3-a, .p4-a, .p6-a, .p7-a').width(_rate*228).height(_rate*220).css({"top":_rate*282, "left":_rate*50});
	$('.p2-b, .p3-b, .p4-b, .p6-b, .p7-b').width(_rate*218).height(_rate*204).css({"top":_rate*550, "left":_rate*440});
	$('.p2-c, .p3-c, .p4-c, .p6-c, .p7-c').width(_rate*228).height(_rate*204).css({"top":_rate*892, "left":_rate*50});
	$('.p4-sa').width(_rate*610).height(_rate*240).css({"top":_rate*240, "left":_rate*60});
	$('.p4-sb').width(_rate*610).height(_rate*260).css({"top":_rate*540, "left":_rate*40});
	$('.p4-sc').width(_rate*610).height(_rate*230).css({"top":_rate*860, "left":_rate*60});
	$('.p5-x1').width(_rate*554).height(_rate*236).css({"top":_rate*250, "left":_rate*166});
	$('.p5-x2').width(_rate*532).height(_rate*211).css({"top":_rate*498, "left":_rate*44});
	$('.p5-x3').width(_rate*521).height(_rate*206).css({"top":_rate*730, "left":_rate*176});
	$('.p5-a').width(_rate*150).height(_rate*137).css({"top":_rate*326, "left":_rate*54});
	$('.p5-b').width(_rate*143).height(_rate*125).css({"top":_rate*568, "left":_rate*554});
	$('.p5-c').width(_rate*119).height(_rate*126).css({"top":_rate*804, "left":_rate*72});
	$('.p5-sa').width(_rate*610).height(_rate*240).css({"top":_rate*240, "left":_rate*60});
	$('.p5-sb').width(_rate*610).height(_rate*220).css({"top":_rate*490, "left":_rate*40});
	$('.p5-sc').width(_rate*610).height(_rate*230).css({"top":_rate*740, "left":_rate*60});
	$('.p6-x1').width(_rate*473).height(_rate*236).css({"top":_rate*250, "left":_rate*224});
	$('.p6-x2').width(_rate*483).height(_rate*234).css({"top":_rate*558, "left":_rate*8});
	$('.p6-x3').width(_rate*548).height(_rate*420).css({"top":_rate*676, "left":_rate*170});
	$('.p6-sa').width(_rate*610).height(_rate*240).css({"top":_rate*240, "left":_rate*60});
	$('.p6-sb').width(_rate*610).height(_rate*220).css({"top":_rate*566, "left":_rate*20});
	$('.p6-sc').width(_rate*610).height(_rate*230).css({"top":_rate*850, "left":_rate*80});
	$('.t6-t1').width(_rate*620).height(_rate*290).css({"top":(h-_rate*290)/2, "left":_rate*65})
    $('.t6-close').width(_rate*80).height(_rate*80).css({"top":0, "left":0});
	$('.t6-big').width(_rate*550).height(_rate*80).css({"top":_rate*110, "left":_rate*40});
	$('.p7-x1').width(_rate*467).height(_rate*343).css({"top":_rate*148, "left":_rate*206});
	$('.p7-x2').width(_rate*433).height(_rate*328).css({"top":_rate*458, "left":_rate*46});
	$('.p7-x3').width(_rate*442).height(_rate*329).css({"top":_rate*762, "left":_rate*220});
	$('.p7-sa').width(_rate*610).height(_rate*240).css({"top":_rate*240, "left":_rate*60});
	$('.p7-sb').width(_rate*610).height(_rate*220).css({"top":_rate*566, "left":_rate*20});
	$('.p7-sc').width(_rate*610).height(_rate*230).css({"top":_rate*850, "left":_rate*80});

	$('.pj-bao').width(_rate*316).height(_rate*119).css({"top":_rate*1068, "left":_rate*70});
	$('.pj-zhe').width(_rate*290).height(_rate*97).css({"top":_rate*1078, "left":_rate*380});
	$('.pj1-zi').height(_rate*321).css({"top":_rate*885});
	$('.pj-d2').height(_rate*387).css({"top":_rate*516});
	$('.kou-b').css({"bottom":_rate*30, "left":_rate*42});


	$(".pj").show();  ///test 
	$(".pj, .kou, .pj-color").css("background", "#70c3ab");
	$(".pj-top").attr("src", "./img/j1/t.png");  
	$(".pj-b2").attr("src", "./img/j1/b2.png");  
	$(".pj-b1").attr("src", "./img/j1/b.png?v=9");  
	$('.pj-d1').attr("src", "./img/j1/d1.jpg");
	$('.pj-d2').attr("src", "./img/j1/d2.png");
	$(".kou-tb1").attr("src", "./img/k1/t.png");
	$(".kou-tb").attr("src", "./img/k1/b.png");  
	$(".kou .p-tu").attr("src", "./img/k1/k.png?v=3");
	$(".kou-di").attr("src", "./img/k1/d.png");
	$('.kou-di').width(_rate*194).height(_rate*123);
	$(".hai").attr("src", "./img/hai.jpg");  ///test 
 
	 
	
	if(h > _rate*1206){
	   var _cha= (h - _rate*1290)/2;
	   if(_cha > 0){
	      $('.p-bg, .pj-b2, .kou-tb').css({"top":_cha});
	      $('.p2-t1').css({"top":-_cha/2});

	      $('.pj-d2').css({"top":_rate*516+_cha});
	      
	   }
	}

	if(_h < 590){
		$('.p-bg').css({"zoom":.92, "left":sWidth*0.04});
	} 

	var _userT={};
	function _nextTi(_num, idx){
        console.log(_num);
        _userT[_num-1]=idx;
        console.log(_userT);
        if(4 == _num){
        	 console.log('start');
        	 console.log(idx);
            if(1 == idx){
             _choosePage='薏仁冰';   
            $(".pj, .kou, .pj-color").css("background", "#e086a2"); //2
          	$(".pj-top").attr("src", "./img/j2/t.png");  
          	$(".pj-b2").attr("src", "./img/j2/b2.png");  
          	$(".pj-b1").attr("src", "./img/j2/b.png?v=9");  
          	$('.pj-d1').attr("src", "./img/j2/d1.jpg");
          	$('.pj-d2').attr("src", "./img/j2/d2.png");
          	$(".hai").attr("src", "./img/hai2.jpg");  
          	$('.pj-pao').show();
          	$(".kou-tb1").attr("src", "./img/k2/t.png");
        	$(".kou-tb").attr("src", "./img/k2/b.png");  
        	$(".kou .p-tu").attr("src", "./img/k2/k.png?v=3");
        	$(".kou-di").attr("src", "./img/k2/d.png");
        	$('.kou-di').width(_rate*234).height(_rate*76);   
            }
            if(2 == idx){
            	_choosePage='气泡水';
                $(".pj, .kou, .pj-color").css("background", "#70c3ab");
            	$(".pj-top").attr("src", "./img/j1/t.png");  
            	$(".pj-b2").attr("src", "./img/j1/b2.png");  
            	$(".pj-b1").attr("src", "./img/j1/b.png?v=9");  
            	$('.pj-d1').attr("src", "./img/j1/d1.jpg");
            	$('.pj-d2').attr("src", "./img/j1/d2.png");
            	$(".kou-tb1").attr("src", "./img/k1/t.png");
            	$(".kou-tb").attr("src", "./img/k1/b.png");  
            	$(".kou .p-tu").attr("src", "./img/k1/k.png?v=3");
            	$(".kou-di").attr("src", "./img/k1/d.png");
            	$('.kou-di').width(_rate*194).height(_rate*123);
            	$(".hai").attr("src", "./img/hai.jpg"); 
            }
            if(3 == idx){
            	_choosePage='芒果冰';
                $(".pj, .kou, .pj-color").css("background", "#80b9df"); 
            	$(".pj-top").attr("src", "./img/j3/t.png");  
            	$(".pj-b2").attr("src", "./img/j3/b2.png");  
            	$(".pj-b1").attr("src", "./img/j3/b.png?v=9");  
            	$('.pj-d1').attr("src", "./img/j3/d1.jpg");
            	$('.pj-d2').attr("src", "./img/j3/d2.png");
            	$(".kou-tb1").attr("src", "./img/k3/t.png");
            	$(".kou-tb").attr("src", "./img/k3/b.png");  
            	$(".kou .p-tu").attr("src", "./img/k3/k.png?v=3");
            	$(".kou-di").attr("src", "./img/k3/d.png");
            	$('.kou-di').width(_rate*242).height(_rate*96); 
            	$(".hai").attr("src", "./img/hai3.jpg"); 
            }

        }
        if(7 == _num){
        	window.setTimeout(function(){
                $('.t-bg, .t-6').fadeIn();
                $(".container").css("background", "none");
                }, 1700);
            return;
        }
		window.setTimeout(function(){
        	$('.p'+_num).hide();
            $('.p'+(_num+1)).fadeIn();
            $('.p'+_num+' .p2-r').show();
            }, 1700);
	}
	var _canClick=true;
	$(".p-a").bind("click touchend",function(){
		if(false == _canClick){return;}_canClick=false;
        var _num=parseInt($(this).parent().attr("id")) +1;
        $(".p"+_num+"-x1").addClass("animated swing");
        _anm.play(); 
        $(".p"+_num+"-b").attr("src", './img/p2-b.png');
        $(".p"+_num+"-c").attr("src", './img/p2-c.png');
        $(".p"+_num+"-a").attr("src", './img/p2-a2.png');
        window.setTimeout(function(){
            $(".p"+_num+"-b, .p"+_num+"-x2").addClass("animated rollOut");
            $(".p"+_num+"-c, .p"+_num+"-x3").addClass("animated rollOutL");
            _feim.play();
        }, 300);   
        _nextTi(_num, 1);
        window.setTimeout(function(){
        	_canClick=true;
        	$(".p"+_num+"-x1").removeClass("animated swing");
        	$(".p"+_num+"-b, .p"+_num+"-x2").removeClass("animated rollOut");
            $(".p"+_num+"-c, .p"+_num+"-x3").removeClass("animated rollOutL");
        	}, 1700);
        _hmt.push(['_trackEvent', '题目'+(_num-1), 'A']);
	});
	$(".p-b").bind("click touchend",function(){
		if(false == _canClick){return;}_canClick=false;
		var _num=parseInt($(this).parent().attr("id")) +1;
		$(".p"+_num+"-x2").addClass("animated swing");
		_anm.play(); 
		$(".p"+_num+"-a").attr("src", './img/p2-a.png');
        $(".p"+_num+"-c").attr("src", './img/p2-c.png');
        $(".p"+_num+"-b").attr("src", './img/p2-b2.png');
        window.setTimeout(function(){
        	 $(".p"+_num+"-a, .p"+_num+"-x1").addClass("animated rollOut");
             $(".p"+_num+"-c, .p"+_num+"-x3").addClass("animated rollOutL");
            _feim.play();
        }, 300); 
        _nextTi(_num, 2);
        window.setTimeout(function(){_canClick=true;
        	$(".p"+_num+"-x2").removeClass("animated swing");
        	$(".p"+_num+"-a, .p"+_num+"-x1").removeClass("animated rollOut");
            $(".p"+_num+"-c, .p"+_num+"-x3").removeClass("animated rollOutL");
        	}, 1700);
        _hmt.push(['_trackEvent', '题目'+(_num-1), 'B']);
	});
	$(".p-c").bind("click touchend",function(){
		if(false == _canClick){return;}_canClick=false;
		var _num=parseInt($(this).parent().attr("id")) +1;
		$(".p"+_num+"-x3").addClass("animated swing");
		_anm.play(); 
		$(".p"+_num+"-a").attr("src", './img/p2-a.png');
        $(".p"+_num+"-b").attr("src", './img/p2-b.png');
        $(".p"+_num+"-c").attr("src", './img/p2-c2.png');
        window.setTimeout(function(){
        	$(".p"+_num+"-a, .p"+_num+"-x1").addClass("animated rollOut");
            $(".p"+_num+"-b, .p"+_num+"-x2").addClass("animated rollOutL");
           _feim.play();
       }, 300);
        _nextTi(_num, 3);
        window.setTimeout(function(){_canClick=true;
        	$(".p"+_num+"-x3").removeClass("animated swing");
        	$(".p"+_num+"-a, .p"+_num+"-x1").removeClass("animated rollOut");
            $(".p"+_num+"-b, .p"+_num+"-x2").removeClass("animated rollOutL");
        	}, 1700);
        _hmt.push(['_trackEvent', '题目'+(_num-1), 'C']);
	});

	$('.p1-bt').bind("click",function(){
		$('.p1-bta').fadeIn(400);
		window.setTimeout(function(){
        $(".p1").hide();
        $(".p2").fadeIn();
        $(".container").css("background", "#fdc74b");
			}, 400);
		_hmt.push(['_trackEvent', '首页', '开始自救']);
		
		$(".pj, .kou, .pj-color").css("background", "#70c3ab");
    	$(".pj-top").attr("src", "./img/j1/t.png");  
    	$(".pj-b2").attr("src", "./img/j1/b2.png");  
    	$(".pj-b1").attr("src", "./img/j1/b.png");  
    	$('.pj-d1').attr("src", "./img/j1/d1.jpg");
    	$('.pj-d2').attr("src", "./img/j1/d2.png");
    	$(".kou-tb1").attr("src", "./img/k1/t.png");
    	$(".kou-tb").attr("src", "./img/k1/b.png");  
    	$(".kou .p-tu").attr("src", "./img/k1/k.png");
    	$(".kou-di").attr("src", "./img/k1/d.png");
    	$('.kou-di').width(_rate*194).height(_rate*123);
    	$(".hai").attr("src", "./img/hai.jpg"); 
	});

	$('.p2-l').bind("click",function(){
		if(false == _canClick){return;}
		var _num=parseInt($(this).parent().attr("id"));
        if(_num < 2){return;}
        var _this=$(this);
        _this.attr("src",'./img/p2-la.png');
        window.setTimeout(function(){
            $(".p"+(_num+1)).hide();
            $(".p"+_num).fadeIn();
            _this.attr("src",'./img/p2-l.png');
    			}, 200);
		console.log(_userT);
	});

	$('.p2-r').bind("click",function(){
		if(false == _canClick){return;}
		var _num=parseInt($(this).parent().attr("id"));
        if(_num > 5){return;}
        var _this=$(this);
        _this.attr("src",'./img/p2-ra.png');
        window.setTimeout(function(){
            $(".p"+(_num+1)).hide();
            $(".p"+(_num+2)).fadeIn();
            _this.attr("src",'./img/p2-r.png');
    			}, 200);
		
		console.log(_userT);
		console.log(_num);
		 
	});
 
	$('.pj-zhe').bind("click",function(){
		$('.pj-zhea').fadeIn(400);
		window.setTimeout(function(){
			$(".pj, .pj-zhea").hide();
	        $(".kou").fadeIn();
			}, 400);
		_hmt.push(['_trackEvent', _choosePage, '越折扣越爽约']);
	});
	$('.kou-b').bind("click",function(){
		$('.kou-ba').fadeIn(400);
		window.setTimeout(function(){
			$(".kou").hide();
	        $(".pj").fadeIn();
			}, 400);
        
	});
	 

	var _musicOn='on';
	$('.p-mu').bind("click",function(){
		if('on' == _musicOn){
			_bgm.pause();
			$('.p-mu').attr("src",'./img/m-off.png');
			_musicOn='off';
		}else{
			_bgm.play();
			_musicOn='on';
			$('.p-mu').attr("src",'./img/m.png');
		}
		
	});
 
 
	$('.t6-close').bind("click",function(){
		$(".p7-b").attr("src", './img/p2-b.png');
        $(".p7-c").attr("src", './img/p2-c.png');
        $(".p7-a").attr("src", './img/p2-a.png');
	    $(".t-bg, .t-6").hide(); 
	});
 
	$('.t6-big').bind("click",function(){
		$(".p1 ,.p2, .p3, .p4, .p5, .p6").hide(); 
	    $(".t-bg, .t-6, .p7").hide(); 
	    $(".pj").fadeIn();
	    window.setTimeout(function(){$('.t-bg, .t-6').hide();}, 1000); 
	    _hmt.push(['_trackEvent', '点击生成', '点击生成你的爽约指南']);
	});

	wx.config({
    	appId: '<?php echo $signPackage["appId"];?>',timestamp: <?php echo $signPackage["timestamp"];?>,
    	nonceStr: '<?php echo $signPackage["nonceStr"];?>',signature: '<?php echo $signPackage["signature"];?>',
    	jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage','onMenuShareQQ','showMenuItems','showOptionMenu','updateAppMessageShareData','updateTimelineShareData']
    });
	wx.ready(function (){
        var _link='http://bellagio.omnimkt.com/ice/';
        var _imgUrl='http://bellagio.omnimkt.com/ice/img/64.png';
		wx.updateAppMessageShareData({ 
	        title: '在吗？我们爽约一夏？',  
	        desc: '不做鸽子王，只做小甜心，我想和你爽快约一次~',  
	        link: _link,  
	        imgUrl: _imgUrl,  
	        success: function () {}
	    })
	    wx.updateTimelineShareData({ 
            title: '被鸽？我有自救指南！', 
            link: _link, 
            imgUrl: _imgUrl,
            success: function () {
            }
        }) 	
	}); 

	$('.hai').bind("click",function(){
	    _hmt.push(['_trackEvent', '长按保存', '长按保存点击']);
	});
	
});
</script></body></html>